
<template>
  <div class="form-page" id='edit'>
    <div class="form-content">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">      
          <el-input v-model="editForm.account" :disabled="this.accountModify"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password" v-show="this.showPassword">      
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleid" >
              <el-radio-group v-model="editForm.roleid" @change="rolechangeHandler">
                  <el-radio :label="1">管理员</el-radio>
                  <el-radio :label="2">组长</el-radio>
                  <el-radio :label="3">组员</el-radio>
              </el-radio-group>
        </el-form-item>
      <el-form-item label="组员" v-show="this.showMemberCheck">
        <template>
  <el-checkbox-group 
    v-model="editForm.members">
    <el-checkbox v-for="member in memberslist" :label="member.id" :key ="member.id">{{member.name}}</el-checkbox>
  </el-checkbox-group>
</template>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import{create,update,get,getMembers} from "@/api/user"

export default {
  data() {
    return {
      //表单数据
      editForm: {
        id: null,
        name: "",
        account: "",
        password: "",
        roleid: 3,
        members:[]
      },
      memberslist:[],
      showMemberCheck:false,
      showPassword:false,
      accountModify:true,
      //校验规则
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" }
        ],
        account: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        roleid:[
          { required: true, message: "请选择角色", trigger: "blur" }
        ],
        password:[
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    initData(m) {
      getMembers().then(Response=>{
        if(Response.success){
          this.memberslist=Response.data
        }
      })
      if (m==undefined||m.id == undefined || m.id == "") {
        this.$refs["editForm"].resetFields();
        this.showPassword=true
        this.accountModify=false
        return;
      }else{
        this.showPassword=false
        this.accountModify=true
      }
      get(m.id).then(Response=>{
        if(Response.success){
          this.editForm=Response.data
        }else{
          this.$message({
                message: '获取用户信息失败：'+Response.message,
                type: 'warning'
          })
        }
      })
    },
    rolechangeHandler(value){
      this.showMemberCheck=(value==2)
    },
    submitForm(formName) {
      var _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          var loading = _this.$loading({
            text: "努力提交中...",
            target: document.querySelector(".form-page")
          });
          if(this.editForm.id==null){
            create(this.editForm).then(Response=>{
              if(Response.success){
                this.$message({
                      message: '提交成功',
                      type: 'success'
                })
                this.$emit("refresh")
              }else{
                this.$message({
                  message:'提交失败：'+Response.message,
                  type: 'warning'
                })
              }
              loading.close()
            })
          }else{
            update(this.editForm).then(Response=>{
              if(Response.success){
                this.$message({
                      message: '提交成功',
                      type: 'success'
                })
                this.$emit("refresh")
              }else{
                this.$message({
                  message:'提交失败：'+Response.message,
                  type: 'warning'
                })
              }
              loading.close()
            })
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

